<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>消息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1 ,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="static/ydui/ydui.rem.css">
    <link rel="stylesheet" href="static/css/font-awesome.min.css">
    <link rel="stylesheet" href="static/css/main.css">
    <!-- 引入rem自适应类库 -->
    <script src="static/ydui/ydui.flexible.js"></script>
</head>
<body>
<div id="app" v-cloak style="height:100%;background-color: #fff;">
    <yd-layout>
    	
    	<yd-navbar slot="navbar" title="消息">
            <a href="index.html" slot="left">
                <yd-navbar-back-icon>返回</yd-navbar-back-icon>
            </a>
        </yd-navbar>

        <yd-infinitescroll :callback="loadList" ref="infinitescrollBills">

            <yd-cell-group slot="list">
                <yd-cell-item style="padding: 0.18rem 0.24rem;" v-for="bill in billList">
                    <span slot="left">
                        <div style="font-size: 0.34rem;font-weight: 600;line-height: 0.4rem;">{{bill.note}}</div>
                        <div style="font-size: 0.2rem;color: #b5b4b4;line-height: 0.4rem;">{{bill.time}}</div>
                    </span>
                    <span slot="right">
                        <div style="font-size: 0.34rem;font-weight: 600;line-height: 0.4rem;">
                            <span v-if="bill.type===1">-</span>
                            <span v-if="bill.type===2">+</span>
                            <span>{{bill.num}}</span>
                            <span>&nbsp;{{bill.token}}</span>
                        </div>
                    </span>
                </yd-cell-item>
            </yd-cell-group>

            <!-- 数据全部加载完毕显示 -->
            <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

            <!-- 加载中提示，不指定，将显示默认加载中图标 -->
            <img slot="loadingTip" src="static/svg/loading.svg"/>

        </yd-infinitescroll>

    </yd-layout>
</div>
<script src="static/lib/jquery.min.js"></script>
<script src="static/lib/fastclick.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<!-- 引入 Vue -->
<script src="static/lib/vue.min.js"></script>
<!-- 引入组件库 -->
<script src="static/ydui/ydui.rem.js"></script>
<script src="static/js/common.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            page:1
            ,pageSize:10
            ,billList:[]
        },
        created:function () {
            var _this = this;
            $.get(baseURL + "/api/v1/get-records",{page:_this.page}, function(r){
                const _list = r;

                _this.billList = [..._this.billList, ..._list];

                if (_list.length < _this.pageSize) {
                    /* 所有数据加载完毕 */
                    _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.loadedDone');
                    return;
                }

                /* 单次请求数据完毕 */
                _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.finishLoad');

                _this.page++;
            });
        },
        methods: {
            loadList:function () {
                var _this = this;
                $.get(baseURL + "/api/v1/get-records",{page:_this.page}, function(r){
                    const _list = r;

                    _this.billList = [..._this.billList, ..._list];

                    if (_list.length < _this.pageSize) {
                        /* 所有数据加载完毕 */
                        _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    _this.$refs.infinitescrollBills.$emit('ydui.infinitescroll.finishLoad');

                    _this.page++;
                });
            }
        }
    })
</script>
</body>
</html>